<template>
	<view>
		
		<!-- <div>积分</div>
		<p>p标签</p>
		<span>span标签</span>
		<span>span标签</span> -->
		
		<!-- 给外部的容器设置为弹性盒子，内部的元素即可按照某种规则排列组合 -->
		<!-- <div class="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div> -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.box{
		display: flex;
	}
/* 
	
	标签是分类型的，有的宽度是屏幕宽度（块元素），有的宽度是内容宽度（内联元素）。
	
	标签默认的排列方式是： 从上到下  从左到右。
	
	有的时候，我们希望 打破这种默认规则，由  从上到下 变成  从左到右 或者其他
	
	可以使用弹性盒子进行布局：
	
	<div class="box">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</div>
	
	div这个元素是块元素，默认规则是 从上到下，我们希望是 从左往后
	做法为： 给父元素  class是box的那个元素   设置为弹性盒子
	弹性盒子的特性： 当你给一个元素设置为弹性盒子之后，内部元素 默认是从左到右，也可以改变成其他排列方式。
	
	如何设置： display: flex;  
	.box{
		display: flex;
	}
	
	
 */
</style>
